import { memo } from "react";
import { Form, Modal } from "antd";
import PSelectorText from "./PSelectorText";

type Props = {
    open: boolean;
    onCancel: () => void;
};
export default memo(function ({ open, onCancel }: Props) {
    const [settingForm] = Form.useForm();
    const rootForm = Form.useFormInstance();

    const onOk = () => {
        settingForm.submit();
        onCancel();
    };

    const afterOpenChange = (open: boolean) => {
        if (open) {
            const root = rootForm.getFieldValue("root");
            const iframe = rootForm.getFieldValue("iframe");
            settingForm.setFieldsValue({ root, iframe });
        }
    };

    return (
        <Modal title="设置" destroyOnClose open={open} onCancel={onCancel} onOk={onOk} afterOpenChange={afterOpenChange}>
            <Form name="settingForm" clearOnDestroy form={settingForm} layout="vertical">
                <PSelectorText name="root" label="根选择器" />
            </Form>
        </Modal>
    );
});
